<template>
    <div class="Indexvue">
        <!--顶栏-->
        <header>
            <h1 v-text="webname"></h1>
            <div class="breadcrumb">
                <i class="layui-icon">&#xe715;</i>
                <ul>
                    <li v-for="vo in address">
                        <a  v-text="vo.name" href="javascript:;" @click="switchPage(vo.url)"></a> <span>/</span>
                    </li>
                </ul>
            </div>
        </header>
        <div class="main">
            <!--左栏-->
            <div class="left">
                <ul class="cl" >
                    <!--顶级分类-->
                    <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                        <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                            <i class="layui-icon" v-html="vo.icon"></i>
                            <span v-text="vo.name"></span>
                            <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                        </a>
                        <!--子级分类-->
                        <div v-for="vo2,index2 in vo.list">
                            <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                            <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                        </div>
                    </li>
                </ul>
            </div>
            <!--右侧-->
            <div class="right">
                <component :is="currentView" :id="gid"></component>
            </div>
        </div>
    </div>
</template>

<script>
    import Welcome from './Welcome.vue'
    import ClearCache from './ClearCache.vue'
    import Organization from './organization/List.vue'
    import AddOrganization from './organization/Add.vue'
    import EditOrganization from './organization/Edit.vue'
    import Department from './department/List.vue'
    import AddDepartment from './department/Add.vue'
    import EditDepartment from './department/Edit.vue'
    export default {
        name: 'Index2',
        data() {
            return {
                menu:[],
                address:[],
                currentView: 'Welcome',
                refView: 'Welcome',
                gid: ''
            }
        },
        components: {
            Welcome,
            ClearCache,
            Organization,
            AddOrganization,
            EditOrganization,
            Department,
            AddDepartment,
            EditDepartment
        },
        created() {
            let that = this;
            //加载左侧菜单
            // let data = sessionStorage.menu;
            // if(!data){
                let url = '/api/menu';
                this.$get(url).then(response => {
                    let menu = response.data;
                    sessionStorage.menu = JSON.stringify(menu);
                    that.menu = menu;
                    that.thisActive(0, false);
                    that.thisAttr();
                })
            // }else{
            //     this.menu = JSON.parse(data);
            //     this.thisActive(0, false);
            //     this.thisAttr();
            // }
        },
        mounted() {
            if(!sessionStorage.user){
                this.$router.push({  name:'Login' })
            }
        },
        watch: {
            'currentView': function (newview, oldview) {
                this.refView = oldview;
            }
        },
        methods: {
            switchPage(view) {
                this.currentView = view;
            },
            toLogin() {
                let that = this;
                layer.confirm("确定要退出系统？", function (index) {
                    sessionStorage.removeItem('user');
                    that.$router.push({name: 'Login'});
                    layer.close(index);
                })
            },
            //记住收展
            onActive:function (pid,id=false) {
                let data;
                if(id===false){

                    data = this.menu[pid];

                    if(data.url.length>0){
                        this.menu.forEach((v,k)=>{
                            v.active = false;
                            v.list.forEach((v2,k2)=>{
                                v2.active = false;
                            })
                        })

                        data.active = true;

                    }

                    data.hidden = !data.hidden;

                }else{

                    this.menu.forEach((v,k)=>{
                        v.active = false;
                        v.list.forEach((v2,k2)=>{
                            v2.active = false;
                        })
                    })

                    data = this.menu[pid].list[id];
                }
                this.updateStorage();
                if(data.url.length>0){
                    if (data.url == 'Logout') {
                        this.toLogin();
                    } else {
                        this.switchPage(data.url);
                    }
                }

                //选中状态赋值
                this.thisActive(pid, id);
                this.thisAttr();
            },

            //更新菜单缓存
            updateStorage(){
                sessionStorage.menu = JSON.stringify(this.menu);
            },
            //菜单高亮
            thisActive:function(pid,id){
                if(id!==false){
                    this.menu[pid].list[id].active = true;
                }else{
                    if(pid!==false){
                        this.menu[pid].active = true;
                    }
                }

                this.updateStorage();

            },
            //当前位置
            thisAttr:function () {
                //当前位置
                let address = [{
                    name:'首页',
                    url:'Welcome'
                }];
                this.menu.forEach((v,k)=>{
                    v.list.forEach((v2,k2)=>{
                        if(v2.active){
                            address.push({
                                name:v.name,
                                url:'javascript:;'
                            })
                            address.push({
                                name:v2.name,
                                url:v2.url,
                            })
                            this.address = address;
                        }
                    })
                })
            },
            //公共方法
            //serializeArray 字符串转json字符串
            toJsonStr: function (arrData) {
                let obj = {};
                for (let i=0; i<arrData.length; i++) {
                    obj[arrData[i].name] = arrData[i]['value'];
                }
                return JSON.stringify(obj);
            },
            back: function () {
                this.switchPage(this.refView);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .layui-form-switch {
        min-width: 50px !important;
    }
</style>
